<template>
  <div class="Logistic-div">
    <p class="Logistic-p">我的物流</p>
    <!-- 根据物流信息是否存在显示不同内容 -->
    <p v-if="logistics.length === 0" class="noLogistic-p">当前没有物流信息</p>
    <div v-else class="logistics-info">
      <div v-for="(item, index) in logistics" :key="index" class="logistic-item">
        <img :src="item.image" />
        <h3>{{ item.name }}</h3>
        <p>物流编号：{{ item.number }}</p>
        <p>当前状态：{{ item.status }}</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive } from "vue";
import './Logistics.css'

// 物流数据，初始为空数组
const logistics = reactive([
  {
    name: "商品 A",
    number: "123456789",
    status: "已发货",
    image: "盈通RTX4070Ti SUPER樱瞳花嫁/O1CN017vEQh61w6Da1sJyl5_!!21216258.jpg", // 商品图片链接
  },
  {
    name: "商品 B",
    number: "123456780",
    status: "已发货",
    image: "盈通RTX4070Ti SUPER樱瞳花嫁/O1CN017vEQh61w6Da1sJyl5_!!21216258.jpg", // 商品图片链接
  },
  {
    name: "商品 C",
    number: "123456781",
    status: "已发货",
    image: "盈通RTX4070Ti SUPER樱瞳花嫁/O1CN017vEQh61w6Da1sJyl5_!!21216258.jpg", // 商品图片链接
  },
  {
    name: "商品 D",
    number: "123456782",
    status: "已发货",
    image: "盈通RTX4070Ti SUPER樱瞳花嫁/O1CN017vEQh61w6Da1sJyl5_!!21216258.jpg", // 商品图片链接
  },

]);
</script>
